<template>
  <div>
    <!-- 1.审核中 -->
    <div class="audit" v-if="state.audit">
      <p class="auditing">{{title}}</p>
      <p class="receive">已收到您的售后申请，我们将尽快处理</p>
      <div class="revocationbtn" @click="removeaudit('审核中')">撤销申请</div>
    </div>

    <!-- 2.已通过,待寄回产品-->
    <div class="pass" v-if="state.pass">
      <p class="passed">{{title}}</p>
      <p class="fast">您的售后申请已通过，请尽快寄回产品</p>
      <p class="close">还剩{{leftDays}}天{{leftHours}}小时自动关闭</p>
      <div class="btn-con">
        <span class="repeal" @click="removeaudit('审核中')">撤销申请</span>
        <span class="write">
          <router-link :to='{name:"express", query: {id:  id,orderId:orderId,productId:productId,address: to_address,company: to_company, phone: to_phone}}'>已寄出，填写快递单</router-link>
        </span>
      </div>
      <!--  此处需跳转express页面 -->
      <p class="merchat">寄回商家地址</p>
      <div class="Sline"></div>
      <span class="company">{{to_company}}</span>
      <span class="phone">{{to_phone}}</span>
      <p class="site">{{to_address}}</p>
    </div>

    <!-- 3.商家已将产品寄回，待收货 -->
    <div class="await" v-if="state.await2">
      <p class="yet">{{title}}</p>
      <p class="remian">还剩{{leftDays}}天{{leftHours}}小时自动收货</p>
      <div class="gotit" @click="removeaudit(title)">确认收货</div>
      <!-- <span class="mesg">快递信息</span> -->
      <div class="Hline"></div>
      <span class="Kname">{{to_express_company}}</span>
      <span class="knum">{{to_express_number}}</span>
    </div>

    <!-- 4.产品已寄出，待商家处理 -->
    <div class="dispose" v-if="state.dispose">
      <p class="sendoff">{{title}}</p>
      <!-- <span class="info">快递信息</span> -->
      <div class="Hline"></div>
      <span class="Kname">{{express_company}}</span>
      <span class="knum">{{express_number}}</span>
    </div>

    <!-- 5.已主动确认收货，售后完成 
         6.超时自动确认收货，售后完成
         7.主动撤销申请，售后关闭
         8.此售后单已由商家关闭
         9.超时未填写订单，自动关闭 -->
    <div class="state" v-if="state.state">{{title}}</div>

    <!-- 10.未通过 -->
    <div class="notpass" v-if="state.notpass">
      <p class="noPass">{{title}}</p>
      <p class="accountfor">{{re_note}}</p>
    </div>

    <!-- 产品信息和备注 -->
    <div class="productcontent">
      <img :src="imgs" alt="" class="productImg">

      <div class="fr">
        <h6 class="productname">{{productname}}</h6>
        <p class="time">申请时间：{{time}}</p>
      </div>

      <div class="line"></div>
      <div class="remark">{{note}}</div>
    </div>

    <!-- 目前进行到的状态 -->
    <div class="morestatus">
      <div class="box" v-for="(item,index) in data" :key="index">
        <div class="times-con">
          <div class="datebox">{{item.date}}</div>
          <div class="timebox">{{item.time}}</div>
        </div>
        <div class="cir-con">
          <div class="circle" :class="{'first-circle': index == 0}"> </div>
          <div class="statusline" v-show="data.length > 1" v-if="index!==0" :class="{'first-line': index == 0, 'last-line':index == (data.length-1)}"></div>
        </div>
        <div class="passstatus" :class="{'first-data': index == 0}">{{item.text}}</div>
      </div>
    </div>

    <!-- 遮罩弹窗撤销和确认收货 -->
    <div class="cover" v-show="coverModal">
      <div class="hint">
        <div class="headline">{{msg}}</div>
        <div class="frame">
          <div @click="hideModal" class="cancel">取消</div>
          <div @click="submitPost" class="enbtn">确定</div>
        </div>
      </div>
    </div>
    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>
</template>

<script>
import toast from "../loading/loading";
export default {
  components: {
    toast
  },
  data() {
    return {
      id: "",
      orderId: "",
      productId: "",
      state: {
        audit: false,
        pass: false,
        await2: false,
        dispose: false,
        state: false,
        notpass: false
      },
      title: "",
      msg: "",
      imgs: "",
      productname: "",
      time: "",
      note: "",
      data: [
        //{ date: "07-18", time: "20:51", status: "申请通过" }
      ],
      coverModal: false,
      re_note: "",
      to_company: "",
      to_phone: "",
      to_address: "",
      express_company: "",
      express_number: "",
      to_express_company: "",
      to_express_number: "",
      leftDays: "",
      leftHours: "",
      msg: "查询中",
      type: "loading",
      load: false
    };
  },
  mounted() {
    var orderId = this.$route.query.orderId;
    this.productId = this.$route.query.productId;
    this.orderId = orderId;
    // this.userLogin();

    var cookie = document.cookie.split(";");
    var cookies = [];
    for (var i = 0; i < cookie.length; i++) {
      var temp = cookie[i].trim().split("=");
      cookies[temp[0]] = temp[1];
    }
    // console.log(cookies);
    var id = cookies["id"];
    // alert(id);
    if (!id) {
      window.location.href = "http://wztest.wofew.com/api/Main/login";
    } else {
      this.geteDetail();
    }
  },
  methods: {
    hideModal() {
      this.coverModal = false;
      this.msg = "";
    },
    submitPost() {
      if (this.msg == "确定要撤销申请吗") {
        this.resetSubmit();
      } else {
        this.getAdress();
      }
    },
    // 撤销申请
    resetSubmit() {
      var that = this;
      $.ajax({
        type: "get",
        data: {
          id: that.orderId
        },
        url: `${this.$store.state.globalIp}/api/Main/revocation`,
        dataType: "json",
        success(result) {
          that.coverModal = false;
          that.state.audit = false;
          that.state.pass = false;
          that.state.await2 = false;
          that.state.dispose = false;
          that.state.state = false;
          that.state.notpass = false;
          that.geteDetail();
          // that.state.state = true;
          // window.location.href = ''
        }
      });
      //
    },
    // 确认收货
    getAdress() {
      var that = this;
      $.ajax({
        type: "get",
        data: {
          id: that.orderId
        },
        url: `${this.$store.state.globalIp}/api/Main/confirm`,
        dataType: "json",
        success(result) {
          that.coverModal = false;
          that.state.audit = false;
          that.state.pass = false;
          that.state.await2 = false;
          that.state.dispose = false;
          that.state.state = false;
          that.state.notpass = false;
          that.geteDetail();
        }
      });
    },
    removeaudit(data) {
      this.coverModal = true;
      if (data == "审核中") {
        this.msg = "确定要撤销申请吗";
      } else {
        this.msg = "确定收到货了吗";
      }
    },
    gettime(inputTime) {
      var date = new Date(inputTime * 1000);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute;
    },
    geteDetail() {
      let me = this;
      this.load = true;
      $.ajax({
        type: "get",
        data: {
          user_id: me.id,
          id: me.orderId,
          product_id: this.$route.query.productId
        },
        url: `${this.$store.state.globalIp}/api/Main/a_sale_detail`,
        dataType: "json",
        success(result) {
          me.load = false;
          if (
            result.data.status == "已主动确认收货，售后完成" ||
            result.data.status == "超时自动确认收货，售后完成" ||
            result.data.status == "主动撤销申请，售后关闭" ||
            result.data.status == "此售后单已由商家关闭" ||
            result.data.status == "超时未填写订单，自动关闭"
          ) {
            me.state.state = true;
          } else {
            if (result.data.status === "审核中") {
              me.state.audit = true;
            } else if (result.data.status === "已通过，待寄回产品") {
              me.state.pass = true;
            } else if (result.data.status === "商家已将产品寄回，待收货") {
              me.state.await2 = true;
            } else if (result.data.status === "产品已寄出，待商家处理") {
              me.state.dispose = true;
            } else {
              me.state.notpass = true;
            }
          }
          me.title = result.data.status;
          me.imgs = result.data.img;
          me.productname = result.data.product_name;
          me.time = me.gettime(result.data.time);
          me.note = result.data.note;
          me.id = result.data.uid;
          me.data = result.data.logs.reverse();
          me.re_note = result.data.re_note;
          me.to_company = result.data.to_company;
          me.to_phone = result.data.to_phone;
          me.to_address = result.data.to_address;
          me.express_company = result.data.express_company;
          me.express_number = result.data.express_number;
          me.to_express_company = result.data.to_express_company;
          me.to_express_number = result.data.to_express_number;
          var timeDiff = parseInt(
            (result.data.time - result.data.updated) / 60 / 60
          );
          //7天时间差
          var sevenDays = 7 * 24;
          console.log(timeDiff);
          console.log(sevenDays);
          if (timeDiff < sevenDays) {
            //没有超过7天时间,算出剩余多少小时
            var leftHours = sevenDays - timeDiff;
            var leftDays = parseInt(leftHours / 24);
            var leftHours = leftHours % 24;
            me.leftDays = leftDays;
            me.leftHours = leftHours;
            console.log(leftHours);
          } else {
            console.log("超过7天");
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.hint {
  width: 281px;
  height: 146px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  margin-top: 200px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hint .headline {
  font-size: 18px;
  font-family: STHeitiSC-Light;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
  width: 100%;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hint .frame {
  width: 100%;
  height: 60px;
  margin: 0 auto;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hint .frame > div {
  width: 50%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: STHeitiSC-Light;
  color: rgba(154, 154, 154, 1);
  font-weight: 300;
}
.hint .cancel {
  color: rgba(51, 51, 51, 1);
  border-right: 1px solid #ccc;
}
.hint .frame > div.enbtn {
  color: #00c200;
}
.cover {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
.statusline {
  position: absolute;
  bottom: 35px;
  left: 24px;
  z-index: 1;
  width: 2px;
  height: 70px;
  background: rgba(238, 238, 238, 1);
}
/* .first-line,
.last-line {
  height: 50%;
} */
/* .last-line {
  transform: translateY(-100%);
} */
.productcontent {
  width: 351px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  overflow: hidden;
}
.productImg {
  float: left;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 12px;
}

.fr {
  float: left;
  margin-top: 20px;
  margin-left: 12px;
}
.productname {
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
}
.time {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
  margin-top: 4px;
}
.line {
  width: 327px;
  height: 1px;
  background: rgba(238, 238, 238, 1);
  margin-top: 84px;
  margin-left: 12px;
}
.remark {
  height: 100%;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 12px;
}
/* 审核中 */
.audit {
  width: 351px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  padding-bottom: 10px;
}
.audit > p {
  width: 100%;
  text-align: center;
}
.auditing {
  display: inline-block;
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
  margin-top: 24px;
}
.receive {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 8px;
}
.revocationbtn {
  width: 100px;
  /* height: 32px; */
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin: 24px auto 0;
  padding: 3px 5px;
}

/*    已主动确认收货，售后完成 
      超时自动确认收货，售后完成
      主动撤销申请，售后关闭
      此售后单已由商家关闭
      超时未填写订单，自动关闭 */
.state {
  width: 351px;
  height: 73px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px 12px 0px 12px;
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 73px;
  text-align: center;
}

/* 未通过 */
.notpass {
  width: 351px;
  /* height: 101px; */
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px 12px 0px 12px;
}
.noPass {
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
  display: inline-block;
  margin-top: 24px;
  margin-left: 148px;
}

.accountfor {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  width: 7.5rem;
  margin: 8px 35px 20px 36px;
}

/* 商家已将产品寄回，待收货 */
.await {
  width: 351px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px 12px 0px 12px;
  padding: 10px;
}
.await > p {
  width: 100%;
  text-align: center;
}
.yet {
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
  margin-top: 24px;
}
.remian {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 10px 0;
  color: #ff5d20;
}
.gotit {
  width: max-content;
  border-radius: 0.133333rem;
  border: 0.026667rem solid #000;
  text-align: center;
  margin: 0.64rem auto 10px;
  padding: 5px 10px;
  font-size: 14px;
}
.mesg {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
  margin-top: 24px;
  margin-left: 12px;
  display: block;
}
.Hline {
  width: 327px;
  height: 1px;
  background: rgba(238, 238, 238, 1);
  margin: 10px;
}
.Kname {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-left: 12px;
}
.knum {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-left: 24px;
}

/* 产品已寄出，待商家处理 */
.dispose {
  width: 351px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px 12px 0px 12px;
  padding-bottom: 10px;
}
.sendoff {
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  width: 100%;
  height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
  margin-left: 12px;
  display: block;
}

/* 已通过,待寄回产品 */
.pass {
  width: 351px;
  /* height: 308px; */
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  padding: 0 12px 10px;
  margin: 12px 12px 0px 12px;
}
.pass > p {
  width: 100%;
  text-align: center;
}
.pass > p.merchat,
.pass > p.site {
  text-align: left;
}
.passed {
  font-size: 18px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
  display: inline-block;
  /* margin-left: 102px; */
  margin-top: 24px;
}
.fast {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 8px;
  /* margin-left: 56px; */
}
.close {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
  margin-top: 4px;
  color: #ff5d20;
}
.btn-con {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0;
}
.repeal {
  display: inline-block;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin-right: 10px;
}
.write {
  flex: 1;
}
.write a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 1);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
.merchat {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
  /* margin-left: 12px; */
  margin-top: 24px;
}
.Sline {
  width: 327px;
  height: 1px;
  background: rgba(238, 238, 238, 1);
  margin: 12px 0;
}
.company {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  margin-right: 10px;
}
.phone {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
}
.site {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  width: 327px;
  /* margin-left: 12px; */
  margin-top: 4px;
}

/* 目前进行到的状态 */
.morestatus {
  width: 351px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  overflow: hidden;
}
.box {
  /* width: 327px; */
  height: 70px;
  padding: 12px;
  position: relative;
  /* overflow: hidden; */
  display: flex;
  align-items: flex-start;
}
.datebox {
  float: left;
  margin-left: 12px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
}
.timebox {
  float: left;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  margin-top: 22px;
  /* margin-left: -35px; */
  margin-left: -0.833333rem;
}
.cir-con {
  width: 50px;
  height: 65px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
.circle {
  width: 12px;
  height: 12px;
  background-color: #ddd;
  border-radius: 50%;
  z-index: 2;
  /* position: absolute;
  z-index: 2;
  left: 78px;
  top: 50%; */
  transform: translateY(-50%);
}
.circle.first-circle {
  width: 16px;
  height: 16px;
  /* left: 76px; */
  background: rgba(255, 206, 67, 1);
}
.passstatus {
  float: left;
  margin-top: 9px;
  /* margin-left: 50px; */
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
}
.first-data {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
}
</style>
